<script setup>
import twoWayIconButton from '@/components/button/two-way-icon-button.vue'

/**
 * 一个按钮: 左侧按钮点击
 */
const handleOneBtnLeftClick = () => {
  alert('一个按钮: 左侧按钮点击')
}

/**
 * 两个按钮
 */
const handleTwoBtnLeftClick = () => {
  alert('两个按钮: 左侧按钮点击')
}

const handleTwoBtnRightClick = () => {
  alert('两个按钮: 右侧按钮点击')
}
</script>

<template>
  <div class="show-component-page">
    <!-- 一个按钮 -->
    <two-way-icon-button type="oneBut" :onLeftClick="handleOneBtnLeftClick"> 一个按钮 </two-way-icon-button>

    <!-- 两个按钮 -->
    <two-way-icon-button
      default-color="rgb(21, 4, 190, 0.8)"
      left-color="rgb(30, 162, 60, 0.8)"
      right-color="rgb(248, 12, 152, 0.8)"
      :onLeftClick="handleTwoBtnLeftClick"
      :onRightClick="handleTwoBtnRightClick"
    >
      两个按钮
    </two-way-icon-button>

    <!-- 标签 -->
    <two-way-icon-button type="tag"> 标签 </two-way-icon-button>
  </div>
</template>

<style lang="scss" scoped>
.show-component-page {
  width: 100%;
  height: 80vh;
  // 内容居中
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
</style>
